<template>
	<view class="">
		<view :class="['navbar',isScroll === true ? 'nav-fixed':'nav-normal']" :style="{ 'height': navheight +parseInt(slotheight)+ 'px' ,'background-color' : bgcolor}">
			<view :style="{ 'height': navheight + 'px' ,'background-color' : bgcolor}">
				<view :style="{'height': statusBarHeight +'px'}"></view>
				<view class="header" @click="getTool" :style="{'height': menuHeight +'px'}">
					<view   class="hearder-status">
						<view class="nav-btn" :style="{'width':btnWidth + 'px','height': btnHeight + 'px', 'color': toolcolor}">
							<view style="width: 50rpx;font-weight: 500;height: 50rpx;position: relative;" >
								<text class="iconfont icon-xiangzuo" style="font-size: 40rpx;color: #ffffff;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);"></text>
							</view>
						</view>
					</view>
					<view class="header-title" :style="{'line-height': menuHeight + 'px', 'color': color}">领券</view>
				</view>
			</view>
			
		</view>
		<view style="position: relative;">
			<image src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220610/16d8e8acb4a59faacb48c6558b92babb.png" style="width: 100%;" mode="widthFix"></image>
			<!-- <text style="font-size: 58upx;color: #FCE1AA;white-space: 1px;position: absolute;top: 180rpx;left: 50%;transform: translateX(-50%);">精选榜单</text>
			<text class="an">按商品销售量排序</text> -->
			
		</view>
		
		
		<view v-for="(item,index) in list" :key='index' style="width: 92%;margin: 30rpx auto;position: relative;">
			<view style="overflow: hidden;background-color: #ffffff;border-radius: 16rpx;box-sizing: border-box;padding-right: 160rpx;position: relative;">
				<view style="width: 100%;box-sizing: border-box;overflow: hidden;border-radius: 16rpx;border-right: 1px dashed #cccccc;">
					<view style="overflow: hidden;width:100%;padding: 40rpx 20rpx 0;box-sizing: border-box;">
						<view style="float: left;width: 204rpx;position: relative;">
							<image style="width:204rpx;height: 110rpx;" src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220610/04265fdb321fe7788a297e4d5bafb56f.png" alt="">
							<view style="overflow: hidden;position: absolute;top: 0rpx;left: 10rpx;width: 184rpx;height: 80rpx;">
								<view style="width: 30%;float: left;text-align: center;position: relative;">
									<text style="color: #755C46;font-size: 60rpx;font-weight: 600;">{{item.number}}</text>
									<text style="display: inline-block;width: 26rpx;height: 26rpx;line-height: 30rpx;border: 1px solid #ffffff;text-align: center;background-color: #755C46;border-radius: 50%;color: #FEDEA9;font-size: 14rpx;position: absolute;bottom:0;left: 50%;">
										{{item.text}}
									</text>
								</view>
								<view style="width: 70%;float: left;text-align: center;box-sizing: border-box;padding: 30rpx 0 10rpx;">
									<view style="line-height: 20rpx;font-size: 16rpx;color: #755C46;" class="yihang">
										{{item.title}}
									</view>
									<view style="line-height: 20rpx;font-size: 10rpx;color: #755C46;">
										dong xian gang
									</view>
								</view>
							</view>
							<view style="position: absolute;color: #755C46;font-size: 10rpx;bottom: 14rpx;right: 20rpx;">
								最终解释权归平台所有
							</view>
						</view>
						<view style="float: right;width: 56%;color: #333333;font-size: 28rpx;line-height: 40rpx;" class="erhang">
							{{item.main_content}}
						</view>
					</view>
					<view style="width: 100%;height: 50rpx;line-height: 50rpx;color: #755C46;font-size: 22rpx;margin-top: 20rpx;background-color: #F9F7F5;box-sizing: border-box;padding-left: 20rpx;">
						有效期：{{item.get_action_time_text}}至{{item.get_end_time_text}}
					</view>
				</view>
				<view class="lingqu" @click="ling(item.id)">
					领取
				</view>
				<view class="zhekou">
					{{item.title}}
				</view>
			</view>
		</view>
		
		
		
		
		
		
		
		
		<view v-if="kk" style="text-align: center;margin-top: 50rpx;">
			<image src="https://dyeego.oss-cn-beijing.aliyuncs.com/uploads/20220406/9f0a29c5b79b0296d72cf8f5bb77f5c2.png" style="width: 60%" mode="widthFix"></image>
		</view>
		<view v-if="enmpy && list.length!=0" style="font-size: 28rpx;color: #C0C0C0;text-align: center;line-height: 60rpx;width: 100%;padding-bottom: 40rpx;">
			已经到底了！
		</view>
		
		<!-- <view class="yijian">
			一键领取
		</view> -->
		<view @click="my_yhq" style="width: 92%;margin: 0 auto;line-height: 40rpx;color: #1fb0ac;font-size: 22rpx;text-align: center;">
			前往我的优惠券查看我所持有的优惠<text style="margin-left: 10rpx;">></text>
		</view>
		<view style="width: 86%;margin: 200rpx auto 30rpx;color: #999999;font-size: 22rpx;">
			<view style="line-height: 40rpx;">使用说明：</view>
			<view style="line-height: 40rpx;">1.本券面值为20元小程序专用券，可购买商品类商品。</view>
			<view style="line-height: 40rpx;">2.此券不找零，不积分，不开具发票。</view>
			<view style="line-height: 40rpx;">3.此券最终解释权归花逸朵所属。</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				scrollTop: 0,
				navheight: 0,
				statusBarHeight: 0,
				menuHeight: 0,
				haveBack: false,
				btnHeight: 30,
				btnWidth: 70,
				isScroll:true,
				slotheight:'0',
				status:1,
				timestamp:186400,
				bgcolor:'',
				
				page: 1,
				kk:false,
				enmpy: false,
				list:[],
			}
		},
		onLoad(option) {
			this.page= 1
			this.kk=false
			this.enmpy= false
			this.list=[]
			this.huoqu()
		},
		methods:{
			my_yhq:function(){
				uni.navigateTo({
					url:'wdyhq'
				})
			},
			getSysHeightInfo() {
				const that = this
				let statusBarHeight, menuButtonObject, menuHeight, navheight, haveBack, btnHeight, btnWidth
			
				statusBarHeight = uni.getSystemInfoSync().statusBarHeight
				//#ifdef MP-WEIXIN
				menuButtonObject = uni.getMenuButtonBoundingClientRect()
				menuHeight = menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2
				navheight = menuHeight + statusBarHeight
				btnHeight = menuButtonObject.height
				btnWidth = menuButtonObject.width
				//#endif
				//#ifdef H5
				menuHeight = 44
				navheight = menuHeight + statusBarHeight
				btnHeight = 30
				btnWidth = 70
				//#endif
				if (getCurrentPages().length === 1) { // 当只有一个页面时
					haveBack = false;
				} else {
					haveBack = true;
				}
				that.navheight = navheight
				that.statusBarHeight = statusBarHeight
				that.menuHeight = menuHeight
				that.haveBack = haveBack
			},
			getTool:function(){
				uni.navigateBack({
					delta:1
				})
			},
			huan:function(index){
				this.status=index
			},
			
			
			// 获取优惠券
			huoqu:function(){
				this.post('api/coupon','',true).then(res=>{
					console.log(res)
					if(res.code==1){
						if(this.page==1){
							if (res.data== null || res.data.length == 0) {
								this.kk = true
								this.enmpy = true
								return
							} else if (res.data.length < 10) {
								this.enmpy = true
							}
						}else{
							if (res.data== null || res.data.length == 0) {
								this.enmpy = true
								return
							} else if (res.data.length < 10) {
								this.enmpy = true
							}
						}
						
						this.page++
						this.list.push(...res.data)
					}else{
						this.kk = true
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			},
			ling:function(id){
				let data={
					id:id
				}
				this.post('api/coupon/get',data,true).then(res=>{
					console.log(res)
					if(res.code==1){
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			}
		},
		filters: {
			getLocalTime(fmt) {
				console.log(fmt);
		
				function PrefixZero(num, n) {
					return (Array(n).join(0) + num).slice(-n);
				}
				var time = '';
				var date = new Date(fmt * 1000);
				var Y = date.getFullYear();
				var M = date.getMonth() + 1;
				var D = date.getDate();
				var h = PrefixZero(date.getHours(), 2);
				var m = PrefixZero(date.getMinutes(), 2);
		
				var s = PrefixZero(date.getSeconds(), 2);
				time = Y + '-' + M + '-' + D ;
				return time;
			}
		},
		onPageScroll(e){
			if(e.scrollTop>100){
				this.bgcolor='#1fb0ac'
			}else{
				this.bgcolor=''
			}
		},
		mounted() {
			const that = this
			this.getSysHeightInfo()
			//#ifdef H5
			window.onscroll = function() {
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				if (scrollTop > 1) {
					that.isScroll = true
				} else {
					that.isScroll = false
				}
			}
			//#endif
		
		},
		watch: {
			
			scrollTop(newValue, oldValue) {
				//#ifdef MP-WEIXIN
				const that = this
				console.log(that.newValue,123456)
				if (newValue > 1) {
					that.isScroll = true
				} else {
					that.isScroll = false
				}
				//#endif
			}
		}
	}
</script>

<style lang="scss">
	.zhekou{
		height: 28rpx;
		background:url(https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220610/7b5a99d12d219862ac4ea162e5b41dc3.png) no-repeat;
		background-size: 100%;
		width: 93rpx;
		position: absolute;
		top: 0;
		left: 60rpx;
		text-align: center;
		line-height: 28rpx;
		font-size: 20rpx;
		color: #fff;
	}
	page{
		background-color: #F4F1F1!important;
		padding-bottom: 30rpx;
		font-family: Demibold;
	}
	.lingqu{
		width: 120rpx;
		height: 50rpx;
		background: #1fb0ac;
		border-radius: 25rpx;
		color: #fff;
		font-size: 20rpx;
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
		text-align: center;
		line-height: 50rpx;
	}
	.yijian{
		width: 690rpx;
		height: 90rpx;
		background: #1fb0ac;
		border-radius: 45rpx;
		text-align: center;
		line-height: 90rpx;
		color: #fff;
		font-size: 30rpx;
		margin: 50rpx auto 20rpx;
	}
		
		
	// 头部
	.navbar {
		width: 100%;
		overflow: hidden;
		top: 0;
		left: 0;
		z-index: 2;
		flex-shrink: 0;
		color: #fff;
		font-size: 16px;
	}
	
	.nav-normal {
		position: relative;
	}
	
	.nav-fixed {
		position: fixed;
	}
	
	.header {
		position: fixed;
		width: 100%;
	}
	
	.logo-centent {
		display: flex;
		align-items: center;
	}
	
	.logo-centent image {
		width: 260rpx;
		height: 68rpx;
		margin-left: 20rpx;
	}
	
	.hearder-status {
		display: flex;
		align-items: center;
		position: absolute;
		padding-left: 30rpx;
		height: 100%;
		z-index: 99999;
	
	}
	
	.header-title {
		height: 100%;
		left: 0;
		right: 0;
		position: absolute;
		margin: auto;
		text-align: center;
	}
	.header-title image{
		position: absolute;
		width:270rpx;
		height: 35rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	
	.header-title-left {
		height: 100%;
		left: 0;
		right: 0;
		position: absolute;
		margin: auto;
		text-align: left;
	}
	
	.back-text {
		margin-left: 7px;
		width: 100upx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	
	.hearder-status .nav-title-left {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgba(0, 0, 0, .8);
		width: 100%;
		font-weight: bold;
	}
	.hearder-status .nav-btn {
		/* background-color: rgba(255, 255, 255, .5);
		border-radius: 15px; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgba(0, 0, 0, .8);
		width: 50%;
		font-weight: bold;
	}
	
	.hearder-status .nav-btn .gotback,
	.hearder-status .nav-btn .gothome {
		flex: 1;
		text-align: center;
		font-size: 18px;
	}
	.Addslot {
		position: absolute;
		width: 100%;
	}
</style>

